<template>
  <div>
    <div class="multiline">姜某，男，<br />30岁，宝安机场海关工作人员，主要负责国际航班入境旅客的流行病学调查工作，居住在南山区南富苑一街四号小区。6月8日姜某例行核酸检测结果为阴性。6月14日上午出现流涕、发热症状，体温达37.9℃，由“120”救护车转送至宝安区中心医院发热门诊就诊，新冠病毒核酸检测初筛阳性，后经市疾控中心复核为阳性，即转送至市第三人民医院应急院区隔离治疗，判定为新冠肺炎确诊病例（轻型）。</div>
    <br/>

    <div class="wrap">
      <div class="table header">
        <div class="table-cell lock">123</div>
        <div class="table-cell multiline">姜某，男，<br />30岁，宝安机场海关工作人员，主要负责国际航班入境旅客的流行病学调查工作，居住在南山区南富苑一街四号小区。6月8日姜某例行核酸检测结果为阴性。6月14日上午出现流涕、发热症状，体温达37.9℃，由“120”救护车转送至宝安区中心医院发热门诊就诊，新冠病毒核酸检测初筛阳性，后经市疾控中心复核为阳性，即转送至市第三人民医院应急院区隔离治疗，判定为新冠肺炎确诊病例（轻型）。</div>
        <div class="table-cell">123</div>
        <div class="table-cell fixed">123</div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.singleline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiline {
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示。 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
  -webkit-line-clamp: 5; /* 显示的行 */
}

.table {
  display: -webkit-box;
}
.table-cell {
  width: 100px;
  border: 1px solid #333;
  padding: 10px 0 0;
}
.wrap {
  position: relative;
  margin-left: 100px;
  background-color: bisque;
}
.header {
  padding-left: -100px;
}
.lock {
  transform: translateX(-100px);
}
.fixed {
  transform: translateX(90%);
}

</style>